<template>
  <div class="lg-container">
    <div class="qrCode">
      <el-image
        v-loading="!qrcode_url"
        style="width: 190px; height: 190px; margin: 0px auto"
        v-bind:src="qrcode_url"
      >
        <div slot="error">
          <div style="width: 190px; margin-top: 40px; text-align: center">
            加载中
          </div>
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
if (process.client) {
  const VueQArt = require("vue-qart");
  Vue.component("qrcode", VueQArt);
}

import { getMiniLoginScene, verifyCode, getMiniQrCode } from "@/api/login";
var countDownFrom = 60;

export default {
  components: {
    // qrcode: VueQArt,
  },
  props: ["keepcount"],
  data() {
    return {
      scene: "",
      qrcode_url: "",
      countDown: countDownFrom,
      freshBtn: true,
      loopId: 0,
      loginCode: "",
      token: "",
      unionid: "",
      phone: "",
      tipBindPhone: false,
      qrConfig: {
        value: "",
        imagePath: "./src/assets/logo/logo-blue.png",
        filter: "color",
      },
    };
  },
  watch: {
    loginCode: function (nv, ov) {
      this.qrConfig.value = nv;
      this.qrcode_url =
        process.env.BASE_API +
        "/api/account/getWxQrCode?code=" +
        nv +
        "&appid=" +
        process.env.APP_ID;
      // 执行
      this.getAccountInfo();
    },
    token: function (nv, ov) {
      if (nv) {
        this.$router.push({ path: "/doc" });
      }
    },
  },
  mounted() {
    this.getLoginCode();
  },
  beforeDestroy() {
    //      console.log("destory");
    clearInterval(this.loopId);
  },
  methods: {
    // 获取登录验证码
    getLoginCode() {
      var _this = this;
      // console.log('get Login Code')
      // 执行请求
      getMiniLoginScene().then((response) => {
        this.scene = response.data.scene;
        getMiniQrCode(this.scene).then(function (response) {
          // 将后台的图片二进制流传华为base64
          const blob = new Blob([response], { type: "image/png" });
          _this.qrcode_url = (window.URL || window.webkitURL).createObjectURL(
            blob
          );
          // 即为图片地址
        });
        // 每隔一段时间跑一次
        this.getAccountInfo();
      });
    },
    // 获取sid
    getAccountInfo() {
      this.loopId = setInterval(() => {
        this.countDown--;
        if (this.countDown == 0) {
          clearInterval(this.loopId);
          this.countDown = countDownFrom;
          this.getLoginCode();
        }
        verifyCode(this.scene)
          .then((response) => {
            console.log("检测登录结果", response);
            if (this.countDown == 0) {
              clearInterval(this.loopId);
              this.countDown = countDownFrom;
              this.getLoginCode();
            }
            if (response.code == 0) {
              this.$store.dispatch("Login", {
                token: response.data.token,
              });
              this.$store.dispatch("GetInfo");

              window.location.reload();
              clearInterval(this.loopId);
              // 触发事件关闭Dialog
              this.closeDialog();
            }
          })
          .catch((err) => {
            this.loading = false;
            setTimeout(() => {}, 2000);
          });
      }, 1000);
    },
    // 刷新二维码
    freshQrCode() {
      this.freshBtn = true;
      this.countDown = countDownFrom;
      this.sid = "";
      this.getLoginCode();
    },
    // 触发关闭dialog的时间
    closeDialog() {
      this.$emit("loginsucc", 1);
    },
  },
};
</script>

<style scoped>
.invalid {
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

.lg-container {
  padding: 40px 24px 48px 24px;
}

.bindphone {
  width: 100%;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lg-container .qrCode {
  width: 250px;
  height: 240px;
  box-sizing: border-box;
  border-radius: 5px;
  /* border:1px solid #CCC; */
  background: #fefeff;
  margin: 0px auto;
  text-align: center;
}

.lg-container .qrCode .qrImg {
  margin: 0px auto;
}
.attention-text {
  padding: 7px 0;
  font-size: 12px;
  color: #ff5562;
}

.hint {
  font-size: 12px;
  margin-top: 20px;
}

.hint a {
  cursor: pointer;
  color: #4b91ea;
  text-decoration: none;
}
</style>
